<style>
  .theme {
    float: left;
    margin: 10px;
    border: #def solid 1px;
    text-align: center;
	overflow:hidden;
  }
  
  .theme:hover,.theme.selected:hover {
    border: #069 solid 1px;
  }

 .theme.selected{
   border:#060 solid 1px;
 }
  
  .theme-info {
    background: #def;
    color: #000;
    height: 36px;
    line-height: 36px;
  }
  
  .theme:hover .theme-info, .theme.selected:hover .theme-info {
    background: #07c;
    color: #fff;
  }
  
  .theme.selected:hover .theme-info{
    background: #07c url() 11px 11px no-repeat;
  }
  
  .theme.selected .theme-info {
    background: #060 url() 11px 11px no-repeat;
    color: #fff;
  }
  
  .theme:hover .theme-info a, .theme.selected .theme-info a {
    color: #fff;
  }
  
  .mobile {
    box-sizing: content-box;
    padding: 10px;
	cursor:pointer;
  }
  
  .mobile-top {
    height: 40px;
    width: 150px;
    background: #000;
    border-left: #000 solid 15px;
    border-right: #000 solid 15px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    box-sizing: content-box;
  }
  
  .mobile-body {
    height: 267px;
    width: 150px;
    background: #fff;
    border-left: #000 solid 15px;
    border-right: #000 solid 15px;
    box-sizing: content-box;
  }
  
  .mobile-bottom {
    height: 60px;
    line-height: 60px;
    width: 150px;
    background: #000;
    border-left: #000 solid 15px;
    border-right: #000 solid 15px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    box-sizing: content-box;
    color: #fff;
  }
  
  .mobile-body img {
    width: 100%;
  }
</style>
<volist name="themeLists" id="vo">
<div class="theme{$vo['id'] == $themeId ? ' selected' : ''}">
  <div class="mobile" data-theme-id="{$vo.id}">
    <div class="mobile-top"></div>
    <div class="mobile-body">
      <img src="{$vo.image}" />
    </div>
    <div class="mobile-bottom">{$vo.name}</div>
  </div>
  <div class="theme-info">
  
    <empty name="vo.config">
    <span>不支持样式配置</span>
    <else/><a href="__CONTROLLER__/config/id/{$vo.id}/model/{$Think.get.model}">样式配置</a>
    </empty>
  </div>
</div>
</volist>
<script type="text/javascript">
  var themes = $('.mobile');
  var model = "{$Think.get.model}";
  themes.click(function(){
    themes.parent().removeClass('selected');
    $(this).parent().addClass('selected');
    var id = $(this).attr( "data-theme-id" );
    $.post ( "__CONTROLLER__/setTheme", {theme: id, model: model}, function(data){
      $().alertMsg ( {type: "success", msg: data.msg} );
    })
  });
</script>

